// 引入 react 依赖
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { Text, View, Image, TouchableOpacity, ImageBackground, ScrollView,InteractionManager } from 'react-native';

// 引入第三方依赖
import _ from 'lodash';
import pureRender from 'pure-render-decorator';
import ScrollableTabView from 'react-native-scrollable-tab-view';
import Icon from 'react-native-vector-icons/Ionicons';
import { Actions } from 'react-native-router-flux';

// antd 按需加载
import { Tabs, Toast, Button } from '@ant-design/react-native';

// 引入 处理数据 所需文件
import { orderList } from '../../module/module.js'

// 引入样式
import Style from './style/style.js';

// 引入公用组件
import { Status, NavBar, BlockBox, ScrollableTabBar } from '../../components/index.js'
import { Orders } from './components/index.js'

// 引入专用组件
import { } from './components'

// 引入工具包
import { press, size, ScreenWidth , defaultDataList,onEndReached,onRefresh ,concatDataList,defaultPage} from '../../util/utils.js'
class Order extends Component {

  constructor(props) {
    super(props);
    this.state = {
      user: null,
      wxUser: null,
      activeTab: props.id || 0,
      orderStatus: [
        { name: '全部', status: null },
        { name: '待付款', status: '1' },
        { name: '待发货', status: '2' },
        { name: '待收货', status: '3' },
        { name: '已完成', status: '4' },
        { name: '已取消', status: '5' },
      ],
    };
  }

  componentDidMount() {

  }

  render() {
    const { orderStatus, activeTab } = this.state
    console.log(activeTab)
    return (
      <View style={Style.container}>
        <Status />
        <NavBar
          title="我的订单"
          back={true}
        />
        <ScrollableTabView
          renderTabBar={() => <ScrollableTabBar activeTextColor="#000000" inactiveTextColor="#000" style={{ borderBottomColor: 'transparent' }} />}
          tabBarBackgroundColor="#fff"
          initialPage={activeTab}
          tabBarTextStyle={{
            fontSize: 14,
          }}
          tabBarUnderlineStyle={{
            backgroundColor: '#000000',
            height: 2
          }}
          style={{
            backgroundColor: '#f0f2f5',
            borderColor: 'transparent',
            height: 800,
            width: ScreenWidth
          }}
        >
          {orderStatus.map((item, index) => (<Orders key={index} tabLabel={item.name} data={item} />))}
        </ScrollableTabView>
      </View >
    );
  }
}


export default connect(({ user }) => ({
  user,
}))(pureRender(Order))
